<template>
  <div class="wrap">
  		<div class="app-header"><header-v></header-v></div>
  		
  		<div class="app-content">
  			<div class="reg_content" v-for="item in tel">
  				<img :src="item.src" alt="tel" @click="shake" />
  				<a href="javascript:;" class="title" :title="item.btn" @click="shake">{{ item.btn }}</a>
  				<div class="con">{{ item.con }}</div>
  			</div>
  			
  			<div class="reg_form">
  				<form action="/" @submit.prevent="submit" method="post">
  					<group>
					    <x-input ref="info1" :show-clear="false" required placeholder="公司名称"></x-input>
					  </group>
					  <group>
					    <x-input ref="info2" :show-clear="false" is-type="china-name" required  right="i" placeholder="联系人"></x-input>
					  </group>
					  <group>
					    <x-input ref="info3" :show-clear="false" type="number" is-type="china-mobile" required  placeholder="手机"></x-input>
					  </group>
					  <group>
					    <x-input ref="info4" :show-clear="false" :type="'email'" is-type="email" required  placeholder="邮箱"></x-input>
					  </group>
					  <group>
					    <x-textarea ref="info5" :show-clear="false" autosize :max="280" placeholder="内容"></x-textarea>
					  </group>
  					<x-button type="default" class="bth">在线报名</x-button>
  				</form>
  				
  				<div v-transfer-dom>	
						<x-dialog v-model="bool" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
			        <p style="color:#fff;text-align:center;" @click="bool = false">
			          <span style="font-size:0.25rem;">恭喜您!提交成功!</span>
			          <br>
			          <br>
			          <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
			        </p>
			      </x-dialog>
			    </div>
			    
			    <div v-transfer-dom>	
						<x-dialog v-model="bool2" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
			        <p style="color:#fff;text-align:center;" @click="bool2 = false">
			          <span style="font-size:0.25rem;">对不起!您的输入有误!</span>
			          <br>
			          <br>
			          <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
			        </p>
			      </x-dialog>
			    </div>
			    
  			</div>
  		</div>
  		
  		<div class="app-footer"><footer-v></footer-v></div>
  </div>
</template>


<script>
import header from '../public/header'
import footer from '../public/footer'
import { XInput,Group,XTextarea,XButton, XDialog, TransferDomDirective as TransferDom } from 'vux'

import src from '../../assets/telephone.gif'

export default {
	
  components: {
  	headerV : header,
  	footerV : footer,
  	XInput, Group, XTextarea, XButton, XDialog
  }, 
  directives: {
    TransferDom
  },
  data () {
    return {
    	bool : false,
    	bool2 : false,
    	tel : [
    		{
    			src : src,
    			btn : '参展/参观登记',
    			con : '极力打造中国专注于某某有机食品行业内规模最大的盛会'
    		}
    	]
    }
  },
  methods : {
  	shake (ev){
  		ev.target.classList.add('shake');
			setTimeout(function (){
				ev.target.classList.remove('shake');
			},950)
  	},
  	submit : function (event){
  		//找到input 判断是否为空~
  		var info = this.$refs.info1.$el.getElementsByClassName('weui-input')[0];
  		var info2 = this.$refs.info2.$el.getElementsByClassName('weui-input')[0];
  		var info3 = this.$refs.info3.$el.getElementsByClassName('weui-input')[0];
  		var info4 = this.$refs.info4.$el.getElementsByClassName('weui-input')[0];
  		var info5 = this.$refs.info5.$el.getElementsByClassName('weui-textarea')[0];
  		
  		if(this.$refs.info1.$el.className == 'vux-x-input weui-cell' && this.$refs.info2.$el.className == 'vux-x-input weui-cell' && this.$refs.info3.$el.className == 'vux-x-input weui-cell' && this.$refs.info4.$el.className == 'vux-x-input weui-cell' && this.$refs.info5.$el.className == 'weui-cell vux-x-textarea' && info.value != '' && info2.value != '' && info3.value != '' && info4.value != '' && info5.value != '' ){
  			
  			this.bool = !this.bool;
        
  		}else{
  			
  			this.bool2 = !this.bool2;
  			
  		}
  		
  	}
  }
}

</script>


<style type="text/css">
	
	/* register.style */
	.wrap{
		background-color: #fff; font-size: 0.14rem;
	}
	.reg_content{
		width:100%; padding: 0.2rem 0; text-align: center;
	}
	.reg_content img{
		width: 0.3rem; height: 0.32rem; display: block; margin: 0.05rem auto;
	}
	.reg_content .title{
		display: block; margin: 0 auto; padding: 0.02rem; width:45% !important; margin-top: 0.1rem; border-radius: 0.05rem; color: #3d9be9; border:0.02rem solid #3d9be9; text-decoration: none; line-height:0.3rem ; font-size: 0.2rem; height: 0.3rem;
	}
	.reg_content .con{
		width:80%; color: #999999; margin:0 auto; margin-top: 0.1rem;
	}
	
	.reg_content .shake {
		-webkit-animation: shake 900ms linear; animation: shake 900ms linear;
	}
	
	.reg_form{
		padding: 0 0.26rem;
	}
	.reg_form input{
		border: 0.01rem solid #dcdcdc; color: #666; text-indent: 1em; height: 0.4rem; font-size: 0.14rem; border-radius: 0.04rem; color: #666;
	}
	.reg_form textarea{
		border: 0.01rem solid #dcdcdc; height: 1rem; color: #666; text-indent: 0.8em; font-size: 0.14rem; margin-bottom: 0.1rem; border-radius: 0.04rem; padding: 0.08rem 0; 
	}
	.reg_form .weui-btn{
		margin: 0.25rem auto; width:40% !important; padding: 0.04rem 0; color: #fff !important; font-size: 0.14rem !important; background: #c09f66 !important; border-radius: 0.2rem !important; text-align: center; line-height: 0.3rem;
	}
	.reg_form .weui-btn:after{
		border: none !important;
	}
	.reg_form .weui-cells:before,.weui-cells:after{
		border: none !important;
	}
	.reg_form .weui-cell{
		padding:0 0.15rem !important ;
	}
	input:focus,textarea:focus{
		border: 0.01rem solid #66afe9; -webkit-box-shadow:0.01rem 0.01rem 0.04rem rgba(102,175,233,0.7);
	}
	
	.vux-input-icon.weui-icon-warn:before, .vux-input-icon.weui-icon-success:before{
		font-size: 0.15rem !important;
	}
</style>